<template>
    <div>
        <p>id:{{id}}  paramId:{{$route.params.id}}</p>
        <p>name:{{name}}</p>



        <!-- 嵌套路由  -->
        <div>
            &nbsp;
            <router-link v-bind:to="'/user/'+id+'/profile'">访问用户头像</router-link>
            &nbsp;
           <!--  <router-link v-bind:to="'/user/'+id+'/posts'">访问博客</router-link> -->
           <a v-on:click="viewPosts">访问博客</a>

        </div>

        <!-- 子层级的router路由器-->
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                id:0,
                name:""
            }
        },
        created:function(){
          this.id=this.$route.params.id;
        },
        watch: { //通过监听router，查看路由变化，只会监听User路由匹配的变化
            '$route' (to, from) {
              console.log("router change:");
              console.log(to);
                console.log(from);
            }
        },
        methods:{
         "viewPosts":function(){
            //API: https://router.vuejs.org/zh-cn/essentials/navigation.html
            //编程式路由，通过调用router的 push, 类似html5中的 History.push方法来实现路由调整
            //以下是通过相对路径，如果要改绝对路径，使用 /开头

           // 命名的路由
            //router.push({ name: 'user', params: { userId: 123 }})

            // 带查询参数，变成 /register?plan=private
            //router.push({ path: 'register', query: { plan: 'private' }})
            // 在浏览器记录中前进一步，等同于 history.forward()
            //router.go(1)

            // 后退一步记录，等同于 history.back()
            //router.go(-1)

            // 前进 3 步记录
            //router.go(3)

            this.$router.push('posts');
         }

        }
    }
</script>